<template>
	<view class="content" :style="{'--color': color}">
		<status-bar ref='statusbar' :title='title' back='0' search='1'></status-bar>
		<!-- 购物车列表 -->
		<view class="list-box" v-if='cartList && cartList.length > 0'>
			<view class="cartList flex-box align-center f-nowrap" v-for="(item,index) in cartList" :key="index">
				<view class="selectInput">
					<view class="selectList" :class="!item.checked?'bor':'thmeBg'" :style="{'--color': color}"
						@click="checkeds(index)">
						<text class="iconfont icon-xuanzhong"></text>
					</view>
				</view>
				<view class="spImages f-shrink-0" @click="toGoods(item.goods_id)">
					<image :src="$imgUrls(item.goodsImg)" mode="aspectFill"></image>
				</view>
				<view class="spxiangqing flex flex-box">
					<view>
						<view class="flex-box flex-between">
							<text class="describe lines2" @click="toGoods(item.goods_id)">{{item.goods_name}}</text>
							<view>
								<text class="icon-del" @click="remove(index,item.car_id)">删除</text>
							</view>
						</view>
						<!-- 规格 -->
						<view class="specs-show" v-if='item.operation_text'>
							<text class="d-inline-block">
								规格：{{item.operation_text}}
							</text>
						</view>
					</view>

					<view class="operation flex-box flex-between">
						<text class="myPrice">{{item.price}}</text>
						<view>
							<view class="btns" :class='{notClick:item.num == 1}'
								@click="increase(index,item.car_id,item.num,item.storeNum,1)">-</view>
							<text class="gmNub">{{item.num}}</text>
							<!-- <input type="number" class="gmNub" @blur="increase(index,item.car_id,item.number,item.storeNum,3)" v-model="item.num"/> -->
							<view class="btns" :class='{notClick:parseInt(item.num) >= parseInt(item.storeNum)}'
								@click="increase(index,item.car_id,item.num,item.storeNum,2)">+</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<empty v-if='nothing' pad='30' type='1' cat='4' :msg='title+"空空的，本喵不开心~"'></empty>
		<!-- 猜你喜欢 -->
		<view style="padding: 24rpx;" v-if="goodsList && goodsList.length > 0">
			<view class="flex-box flex-center align-center youTitle">
				<text class="toLeft"></text>
				<text class="toLeft"></text>
				<view>猜你喜欢</view>
				<text class="toRight"></text>
				<text class="toRight"></text>
			</view>
			<view class="my-box">
				<view class="left-box">
					<view class="repeatGoodsList">
						<view v-for="(item, index) in goodsLeftList" :key="index" @click="toGoods(item.goods_id)"
							class="my-goods-box" :class="'goods-'+item.goods_id">
							<image :src="item.img?$imgUrls(item.img):''" mode="widthFix" class="goodImg" :data-name="item.name"
								:data-id="item.goods_id" :data-type="item.type" @error='onImageLoad' @load="onImageLoad"></image>
							<view class="goods-box-msg">
								<view class="thmeTxt lines2 hisGoodsName2">
									<text v-if='item.type == 1' class="speTag">特价</text>
									<text v-if='item.type == 2' class="speTag">团购</text>
									{{item.name}}
								</view>
								<!-- <view class="saled" v-if='hot == 1'>
									<text>已售{{item.sales_number}}</text>
									<text>热度{{item.show_number}}</text>
								</view> -->
								<view class="profitTitle_ lines" v-if='item.profitTitle'>
									<text>{{ item.profitTitle }}</text>
								</view>
								<view class="prices flex-box flex-between">
									<view class="priceNow">
										<text class="price myPrice">{{item.type == 2?item.open_group_price:item.price}}</text>
										<template
											v-if='(item.type == 1 || item.type == 0) && parseFloat(item.price) != parseFloat(item.full_price)'>
											<text class="priceReg myPrice">{{item.full_price}}</text>
										</template>
										<template
											v-if='item.type == 2 && parseFloat(item.full_price) != parseFloat(item.open_group_price)'>
											<text class="priceReg myPrice">{{item.full_price}}</text>
										</template>
									</view>
									<!-- <view class="position flex-box align-center" v-if='position == 1 && positionshow == 1 && item.distance'>
										<text class="iconfont icon-dingwei"></text>
										<text class="txt">{{parseFloat(item.distance)>999?(parseFloat(item.distance)/1000).toFixed(2)+'km':parseFloat(item.distance).toFixed(2)+'m'}}</text>
									</view> -->
								</view>

							</view>
							<view class="maskObtained" v-if='item.state == 0'>
								<image :src="staticUrl+'/images/Obtained.png'" class="icon-obtained"></image>
							</view>
						</view>
					</view>
				</view>
				<view class="right-box">
					<view class="repeatGoodsList">
						<view v-for="(item, index) in goodsRightList" :key="index" @click="toGoods(item.goods_id)"
							class="my-goods-box" :class="'goods-'+item.goods_id">
							<image :src="item.img?$imgUrls(item.img):''" mode="widthFix" class="goodImg" :data-name="item.name"
								:data-id="item.goods_id" :data-type="item.type" @error='onImageLoad' @load="onImageLoad"></image>
							<view class="goods-box-msg">
								<view class="thmeTxt lines2 hisGoodsName2">
									<text v-if='item.type == 1' class="speTag">特价</text>
									<text v-if='item.type == 2' class="speTag">团购</text>
									{{item.name}}
								</view>
								<!-- <view class="saled" v-if='hot == 1'>
									<text>已售{{item.sales_number}}</text>
									<text>热度{{item.show_number}}</text>
								</view> -->
								<view class="profitTitle_ lines" v-if='item.profitTitle'>
									<text>{{ item.profitTitle }}</text>
								</view>
								<view class="prices flex-box flex-between">
									<view>
										<view class="priceNow">
											<text class="price myPrice">{{item.type == 2?item.open_group_price:item.price}}</text>
											<template
												v-if='(item.type == 1 || item.type == 0) && parseFloat(item.price) != parseFloat(item.full_price)'>
												<text class="priceReg myPrice">{{item.full_price}}</text>
											</template>
											<template
												v-if='item.type == 2 && parseFloat(item.full_price) != parseFloat(item.open_group_price)'>
												<text class="priceReg myPrice">{{item.full_price}}</text>
											</template>
										</view>
									</view>
									<!-- <view class="position flex-box align-center" v-if='position == 1 && positionshow == 1 && item.distance'>
										<text class="iconfont icon-dingwei"></text>
										<text class="txt">{{parseFloat(item.distance)>999?(parseFloat(item.distance)/1000).toFixed(2)+'km':parseFloat(item.distance).toFixed(2)+'m'}}</text>
									</view> -->
								</view>

							</view>
							<view class="maskObtained" v-if='item.state == 0'>
								<image :src="staticUrl+'/images/Obtained.png'" class="icon-obtained"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部操作 -->
		<view class="bottom-box" v-if='cartList.length > 0'>
			<view class="bottomf flex-box flex-between">
				<view class="leftPic flex-box align-center">
					<view @click="allCheckeds" class="flex-box align-center">
						<view class="selectList" :class="!allChecked?'bor':'thmeBg'" :style="{'--color': color}">
							<text class="iconfont icon-xuanzhong"></text>
						</view>
						<text class="qselect">全选</text>
					</view>
					<text class="total">合计：<text class="cost">{{parseFloat(total).toFixed(2)}}</text></text>
				</view>
				<view class="rightBtn thmeBg" @click="edtorOrder">去结算</view>
			</view>
		</view>




		<showModel v-if='showModal' @cancelFunc='closeModel' type='99' @certain='delCart'
			:title='"是否确定删除该"+nameDefinition.goodsName+"？"' msg='删除后将不可恢复' btn1='取消' btn2='我很确定'></showModel>
		<tabBar v-if="isflag" :tab="7"></tabBar>
	</view>
</template>
<script>
	import { mapState } from 'vuex';
	var that;
	export default {

		data() {
			return {

				showModal: false,
				carIndex: -1,
				carId: '',
				imgUrl: this.imgUrl,
				total: 0,
				cartList: [], // 商品列表
				allChecked: false,
				commodity: [],
				adIds: [], // 选中的商品ID
				nothing: false, // 购物车为空

				staticUrl: this.staticUrl,


				goodsList: [],
				goodsListCount: 0, //加载第i张图片
				goodsLeftList: [], // 左侧商品列表
				goodsLeftListHeight: 0,
				goodsRightList: [], // 右侧商品列表
				goodsRightListHeight: 0,

			}
		},
		onShow() {
			this.getCart();
		},
		methods: {
			getCart() { // 7、获取购物车数据
				let that = this;
				that.allChecked = false
				that.total = 0
				that.$http.post({
					url: '/zzj_singleSaleApi/cartList',
				}).then(res => {
					if (res.errcode == 100 && res.data) {
						that.nothing = false;
						that.cartList = res.data;
						that.goodsList = []
					} else {
						that.cartList = [];
						that.nothing = true;
						that.getUlike()
					}
				})
			},
			getUlike() { // 猜你喜欢
				let that = this;
				that.$http.post({
					url: '/singleSaleApi/guessLikeGoods',
				}).then(res => {
					if (res.data) {
						if (that.goodsList.length < 1) {
							that.goodsList = res.data;
							that.goodsLeftList.push(res.data[0])
						}
					} else {
						that.goodsList = []
					}
				})
			},
			onImageLoad: function(e) {
				let that = this;
				let rImgH = 0;
				var goodsId = 'goods-' + e.target.dataset.id;
				uni.createSelectorQuery().in(this).select("." + goodsId).boundingClientRect(function(data) {
					rImgH += data.height
					if (that.goodsListCount == 0) {
						that.goodsLeftListHeight += rImgH; //第一张图片高度加到goodsLeftListHeight 
						that.goodsListCount++;
						that.goodsRightList.push(that.goodsList[that
							.goodsListCount]); //添加第二张图片到goodsRightList数组，因为第一张已经初始化到左侧列表中
					} else {
						that.goodsListCount++;
						if (that.goodsLeftListHeight > that.goodsRightListHeight) { //把图片的高度加到目前高度更低的栏中
							that.goodsRightListHeight += rImgH;
						} else {
							that.goodsLeftListHeight += rImgH;
						}
						if (that.goodsListCount < that.goodsList.length) { //根据目前的栏高，把下一张图片，push到低的那栏
							if (that.goodsLeftListHeight > that.goodsRightListHeight) {
								that.goodsRightList.push(that.goodsList[that.goodsListCount]);
							} else {
								that.goodsLeftList.push(that.goodsList[that.goodsListCount]);
							}
						}
					}
				}).exec()
			},
			closeModel() {
				let that = this;
				that.showModal = false;
				that.getCart();
			},
			// 手动修改购物车商品数量
			changeNumber(index, number) {
				let that = this;
				that.cartList[index].num = number;
			},

			edtorOrder() {
				let that = this;
				var buyState = uni.getStorageSync('buyState');
				// if (buyState == 0) return this.$Toast('您已无购买权限！')
				// 去结算
				try {
					uni.removeStorageSync('car_id');
				} catch (e) {
					// error
				}
				if (that.adIds.length > 0) {
					var adIds = that.adIds.join(",");
					uni.setStorage({
						key: 'buyway',
						data: ''
					})
					uni.navigateTo({
						url: '/orderPage/order/createOrders?car_id=' + adIds
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: '请选择' + that.nameDefinition.goodsName + '!'
					})
				}
			},
			reduce(i, carId) {
				let that = this;
				if (parseInt(that.cartList[i].num) > 1) {
					that.$http.post({ // 10.购物车减去数量
						url: '/zzj_singleSaleApi/decCart',
						data: {
							car_id: carId,
							num: that.cartList[i].num,
						}
					}).then(res => {
						if (res.code == 100) {
							let n = parseInt(that.cartList[i].num)
							that.cartList[i].num = n--;
							that.totalPrice();
						} else {
							uni.showToast({
								title: res.msg,
								duration: 1500
							})
						}
					})
				} else {
					uni.showToast({
						title: '数量不能少于1哦'
					})
				}
			},
			increase(i, carId, number, storeNum, type) {
				let that = this;
				// type:  1减  2加  3修改
				var num = parseInt(number);
				var storeNum = parseInt(storeNum);
				if (type == 1 && num < 2) {
					uni.showToast({
						icon: 'none',
						title: '数量不能少于1'
					})
					return
				}
				if (type == 2 && num < storeNum) {
					num++
				}
				if (num >= storeNum) {
					uni.showToast({
						icon: 'none',
						title: '库存不足了哦'
					})
					return
				}
				if (type == 1 && num > 1) {
					num--
				}
				// if(type == 3 && num < storeNum){
				// 	num = num
				// }
				that.$http.post({
					url: '/zzj_singleSaleApi/incCart',
					data: {
						car_id: carId,
						num: num
					}
				}).then(res => {
					if (res.errcode == 100) {
						that.cartList[i].num = num;
						that.totalPrice();
					} else {
						uni.showToast({
							title: res.msg,
							duration: 1500,
							icon: "none"
						})
					}
				})
			},
			delCart() {
				let that = this;
				that.$http.post({ // 8、删除购物车
					url: '/zzj_singleSaleApi/delCart',
					data: {
						car_id: that.carId,
					}
				}).then(res => {
					if (res.errcode == 100) {
						that.$delete(that.cartList, that.carIndex);
						that.totalPrice();
						if (that.cartList.length < 1) {
							that.nothing = true;
							that.allChecked = false;
							that.$emit('isEmpty', 1)
						}

					} else {
						uni.showToast({
							title: res.msg,
							duration: 1500
						})
					}
					that.showModal = false;
				})
			},
			remove(i, carId) {
				let that = this;
				that.carId = carId;
				that.carIndex = i;
				that.showModal = true
			},
			checkeds(i) {
				let that = this;
				// 单选
				that.cartList[i].checked = !that.cartList[i].checked;
				that.totalPrice();
				var j = 0,
					len = that.cartList.length;
				that.adIds = [];
				for (let l = 0; l < len; l++) {
					if (that.cartList[l].checked === true) {
						j++;
						that.adIds.splice(0, -1, that.cartList[l].car_id);
					}
					if (l == len - 1) {
						if (j < len) { // 并未全选
							that.allChecked = false
						} else { // 全选
							that.allChecked = true
						}
					}
				}
				that.cartList = [].concat(that.cartList)
			},
			allCheckeds() {
				let that = this;
				// 全选
				if (that.cartList.length == 0) {
					uni.showToast({
						icon: 'none',
						title: '请先添加' + that.goodsName + '哦'
					})
					return
				}
				that.adIds = [];
				if (that.allChecked) {
					for (let i in that.cartList) {
						that.cartList[i].checked = false
					}
				} else {
					for (let i in that.cartList) {
						that.cartList[i].checked = true;
						that.adIds.splice(0, -1, that.cartList[i].car_id);
					}
				}
				that.allChecked = !that.allChecked;
				that.totalPrice();
			},
			totalPrice() {
				let that = this;
				// 计算总价
				let totals = 0;
				for (let i in that.cartList) {
					if (that.cartList[i].checked) {
						totals += parseFloat(that.cartList[i].price) * parseInt(that.cartList[i].num);
					}
				}
				that.total = totals.toFixed(2);
			}
		},
		computed: {
			...mapState(['nameDefinition', 'tabTitle', 'vid', 'share', 'color', 'tabBar']),

			isflag() {
				const tabs = this.tabBar.list;
				return tabs.some((n) => n.id == 2);
			},
			title() {
				return this.tabTitle ? this.tabTitle : '购物车'
			},
		},
		onShareAppMessage(res) {
			let share = this.share;
			return {
				title: share.title,
				desc: share.desc,
				path: `/pages/index/index?share_v_id=${this.vid}&pageType=999`,
				imageUrl: `${share.imageUrl}`
			}
		},
		onPullDownRefresh() {
			let that = this;
			that.cartList = [];
			that.getCart();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000)
		},
	}
</script>

<style scoped lang="scss">
	.selectList {
		width: 36rpx;
		height: 36rpx;
		border-radius: 100%;
		margin-right: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;

	}

	.content {
		box-sizing: border-box;

		.list-box {
			padding-bottom: 20rpx;

			.cartList {
				margin: 20upx;
				padding: 20rpx 20rpx 20rpx 10rpx;
				background: #FFFFFF;
				overflow: hidden;
				margin-bottom: 8upx;
				box-shadow: 0 0 8rpx 1px rgba(0, 0, 0, .08);
				border-radius: 16upx;
				height: 240upx;

				.selectInput {
					padding: 30rpx 10rpx;
				}

				.spImages {
					width: 200upx;
					height: 200upx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.spxiangqing {
					position: relative;
					flex-direction: column;
					justify-content: space-between;
					padding-left: 10rpx;
					height: 100%;

					.describe {
						font-size: 26rpx;
						line-height: 40rpx;
						flex: 1;
						text-align: justify;
						margin-right: 10upx;
					}

					.icon-del {
						color: red;
						padding-left: 10rpx;
					}

					.specs-show {
						// height: 40upx;
						display: flex;
						align-items: center;
						overflow: hidden;
						margin-top: 10rpx;

						text {
							font-size: 22rpx;
							color: #999;
							background-color: #EEEEEE;
							border-radius: 4upx;
							padding: 4upx 8upx;
							// white-space: nowrap;
							// text-overflow: ellipsis;
						}

					}

					.operation {
						width: 100%;
						overflow: hidden;
						margin-top: 16rpx;
						align-items: flex-end;

						.myPrice {
							color: $uni-color-price;
							font-size: 30rpx;
							font-weight: bold;
						}

						.notClick {
							background: #F2F2F2;
							color: #D5D5D5;
						}

						.gmNub {
							float: left;
							height: 44upx;
							border: 1upx solid #DDDDDD;
							border-radius: 10upx;
							width: 110upx;
							margin: 0 10upx;
							text-align: center;
							color: #D5D5D5;
							line-height: 44upx;
							min-height: auto;
							box-sizing: border-box;
						}

						.btns {
							width: 44upx;
							height: 44upx;
							border: 1upx solid #DDDDDD;
							border-radius: 10upx;
							float: left;
							text-align: center;
							line-height: 36upx;
							color: #333333;
							font-size: 40upx;
						}
					}
				}
			}
		}

		.bottom-box {
			height: 100rpx;

			.bottomf {
				width: 100%;
				height: 100rpx;
				background: #FFFFFF;
				overflow: hidden;
				position: fixed;
				left: 0;
				bottom: calc(100rpx + constant(safe-area-inset-bottom));
				bottom: calc(100rpx + env(safe-area-inset-bottom));
				border-top: 1upx solid #EFEFEF;
				z-index: 5;

				.leftPic {
					overflow: hidden;
					padding-left: $uni-page-space;

					.qselect {
						color: #666666;
					}

					.total {
						color: #333333;
						margin-left: 50upx;
						font-size: 26rpx;

						.cost {
							color: $uni-color-price;
							margin-right: 10upx;
							font-weight: bold;
							font-size: 32rpx;
						}
					}
				}

				.rightBtn {
					width: 200upx;
					height: 100upx;
					color: #FFFFFF;
					text-align: center;
					line-height: 100upx;
				}
			}
		}
	}

	.bor {
		border: 1px solid #afafaf;
	}
</style>